<script setup>
import CommonHead from "@/layout/CommonHead.vue"
import CommonAside from "@/layout/CommonAside.vue"
import request from "@/net/request.js";
import {onMounted, reactive, ref,} from "vue";
import { options } from "@/components/InStore/options.js";
import {ElNotification } from 'element-plus';
import {Delete,Search,Plus,Edit,Refresh} from '@element-plus/icons-vue'
const state = reactive({
    tableData: [],
    form: {
        inId: '',
        inDate: '',
        carId: '',
        inTon: '',
        inCount: '',
        inStoreId: '',
        createName:''
    },
    delorget: {
        companyId: ''
    }
})
const reset = () => {
        state.form.inId = ''
        state.form.inDate = ''
        state.form.carId = ''
        state.form.inTon = ''
        state.form.inCount = ''
        state.form.inStoreId = ''
        state.form.createName = ''
    }

onMounted(() => {
    inStoreFind()

    })

    const tmp = []
    const inStoreFind = () => {
        request.get("/InStore/find").then(res => {
           state.tableData = res.data
        })        

    }


    const inStoreDel = () => {
        request.post("/InStore/delete",state.delorget).then(res => {
            if (res.status === '200') {
              ElNotification({
                type: 'success',
                message: res.msg
              })
              inStoreFind()
            }
            else ElNotification({
              type: 'error',
              message: res.msg
            })
        })
    }
    const inStoreAdd = () => {
      if(state.form.inId != ''){
        request.post("/InStore/add",state.form).then(res => {
        if (res.status === '200'&&state.form.inId != ''){
          ElNotification({
              type: 'success',
              message: res.msg
          })
          inStoreFind()
        }
        else ElNotification({
              type: 'error',
              message: res.msg
            })
      })
      }
      else{
        ElNotification({
          type: 'error',
          message:'入库失败，单号不能为空'
        })
      }
      
    }

    // const inStoreModify = () => {
    //   request.post("/InStore/modify",state.form).then(res => {
    //     if(res.status === '200'){
    //       ElNotification({
    //         type: 'success',
    //         message: res.msg
    //       })
    //       inStoreFind()
    //     }
    //     else{
    //       ElNotification({
    //         type: 'error',
    //         message: res.msg
    //       })
    //     }
    //   })
    // }

    const inStoreGet = () => {
      if(state.delorget.inId === ''){
        inStoreFind()
      }
      else{
        request.post("/InStore/get",state.delorget).then(res => {
        if(res.status === '200'){
          ElNotification({
            type: 'success',
            message: res.msg
          })
          state.tableData = res.data
        }else{
          ElNotification({
            type: 'error',
            message: res.msg
          })
        }
      })
      }
      
    }






</script>




<template>
    <el-container style="height: 100%">
      <el-aside width="auto">
        <CommonAside/>
      </el-aside>
      <el-container>
        <el-header>
          <CommonHead/>
        </el-header>
        <el-main>
          <el-card shadow="never">
            <el-row :gutter="20">
              <el-col :span="2">
                <el-input placeholder="入库单号" v-model.trim="state.form.inId" clearable></el-input>
              </el-col>
              <el-col :span="5">
                <el-config-provider :locale="locale">
                  <el-date-picker
                      v-model="state.form.inDate"
                      tpye = "date"
                      placeholder="请选择入库日期"
                      :size="size"
                      value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-config-provider>
              </el-col>
              <el-col :span="3">
                <el-input placeholder="进货车牌" v-model.trim="state.form.carId" clearable></el-input>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="入库吨数" v-model="state.form.inTon" oninput="value=value.replace(/[^\d.]/g, '')" clearable></el-input>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="入库件数" v-model="state.form.inCount" oninput="value=value.replace(/\D/g,'')" clearable></el-input>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="仓库ID" v-model.trim="state.form.inStoreId" clearable></el-input>
              </el-col>
              <el-col :span="3">
                <el-input placeholder="创建人" v-model.trim="state.form.createName" clearable></el-input>
              </el-col>
              <el-button type="success" :icon = "Plus" round @click="inStoreAdd">InStore</el-button>
              <!-- <el-button type="primary" :icon = "Edit" round @click="inStoreModify">Modify</el-button>  -->
              <el-button type="warning" :icon = "Refresh" round @click="reset">Reset</el-button>
            </el-row>
          </el-card>
          <el-row class="el_row"  :gutter="20" >
            <el-col :span="5">
              <el-input placeholder="请输入要删除或查找的入库单号"  v-model="state.delorget.inId" clearable></el-input>
            </el-col>
            <el-button type="danger" @click="inStoreDel" :icon="Delete" >Delete</el-button>
            <el-button type="primary" :icon="Search" @click="inStoreGet">Search</el-button>
          </el-row>
          <el-table :data="state.tableData" stripe style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in options" :key="index">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </template>